<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>网易云音乐</title>
  <!-- 
  在Node.js应用中，使用Nginx作为反向代理服务器可以有效解决跨域问题。
  1. 什么是Nginx？
  Nginx是一个高性能的HTTP和反向代理服务器，广泛用于负载均衡、HTTP缓存和作为反向代理。它可以帮助处理跨域请求、提高应用的性能和安全性。

  2. Nginx解决跨域的基本原理
  通过将Nginx配置为反向代理，可以将前端请求转发到后端Node.js应用，从而避免浏览器的同源策略限制。前端应用和后端API都通过Nginx进行通信，浏览器只与Nginx交互。

  3. Nginx配置示例
  以下是一个简单的Nginx配置示例，展示如何设置Nginx来解决跨域问题：
   1. 安装Nginx
  在大多数Linux系统上，可以使用以下命令安装Nginx：
  sudo apt update
  sudo apt install nginx
   2. 配置Nginx

  打开Nginx配置文件（通常位于  `/etc/nginx/sites-available/default`  或  `/etc/nginx/nginx.conf` ），并添加以下配置：
  nginx
  server {
      listen 80;
      server_name yourdomain.com;  # 替换为你的域名

      location / {
          proxy_pass http://localhost:3000;  # 将请求转发到Node.js应用
          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection 'upgrade';
          proxy_set_header Host $host;
          proxy_cache_bypass $http_upgrade;

          # 添加CORS头部
          add_header 'Access-Control-Allow-Origin' '*';  # 允许所有源
          add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';  # 允许的HTTP方法
          add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';  # 允许的请求头
      }
  }
   3. 重启Nginx

  在修改Nginx配置后，需要重启Nginx以使更改生效：
  sudo systemctl restart nginx
  4. 注意事项

  - 安全性: 在生产环境中，建议不要使用 `Access-Control-Allow-Origin: *` ，而是指定具体的域名，以防止安全风险。
  - OPTIONS请求: 如果客户端发送的请求需要预检（如使用PUT或DELETE方法），Nginx会自动处理OPTIONS请求。
  - SSL支持: 如果你的应用需要HTTPS支持，可以配置Nginx使用SSL证书。

  5. 总结

  使用Nginx作为反向代理可以有效解决跨域问题，简化前端与后端之间的通信。通过适当的Nginx配置，可以控制CORS头部，从而实现安全的跨域请求。
  -->
</head>

<body>
  <h1>网易云音乐项目</h1>

  <script>
    // 1.XHR网络请求
    const xhr = new XMLHttpRequest()
    xhr.onreadystatechange = function () {
      if (xhr.readyState === XMLHttpRequest.DONE) {
        console.log(JSON.parse(xhr.responseText))
      }
    }
    xhr.open('get', 'http://localhost/users/list')
    xhr.send()


    // 2.fetch网络请求
    fetch('http://localhost/users/list').then(async res => {
      const result = await res.json()
      console.log(result)
    })
  </script>
</body>

</html>